<template>
  <div>
    <a-card>
      <a-button type="primary" @click="showModal">添加分类</a-button>
      <a-table :columns="columns" :data-source="data" />
    </a-card>
    <a-modal
      title="分类信息"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleOk">
        <a-form-item label="类型名称 ">
          <a-input v-decorator="['typeName', { rules: [{ required: true, message: '请输入类型名称!' }] }]" />
        </a-form-item>
        <a-form-item label="分类" has-feedback>
          <a-select
            v-decorator="['typeParentId', { rules: [{ required: true, message: '请选择一个分类!' }] }]"
            placeholder="0 代表没有父级"
          >
            <a-select-option value="0">0</a-select-option>
            <a-select-option v-for="(item, index) in data" :key="index" :value="item.typeId">{{
              item.typeName
            }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import { queryParentGoods, addGoodsType } from '@/api/goods'
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '类型ID',
    dataIndex: 'typeId',
  },
  {
    title: '名称',
    dataIndex: 'typeName',
    key: 'typeName',
  },
]

const data = [
  {
    key: 1,
    name: 'John Brown sr.',
    age: 60,
    address: 'New York No. 1 Lake Park',
    children: [
      {
        key: 11,
        name: 'John Brown',
        age: 42,
        address: 'New York No. 2 Lake Park',
      },
      {
        key: 12,
        name: 'John Brown jr.',
        age: 30,
        address: 'New York No. 3 Lake Park',
        children: [
          {
            key: 121,
            name: 'Jimmy Brown',
            age: 16,
            address: 'New York No. 3 Lake Park',
          },
        ],
      },
      {
        key: 13,
        name: 'Jim Green sr.',
        age: 72,
        address: 'London No. 1 Lake Park',
        children: [
          {
            key: 131,
            name: 'Jim Green',
            age: 42,
            address: 'London No. 2 Lake Park',
            children: [
              {
                key: 1311,
                name: 'Jim Green jr.',
                age: 25,
                address: 'London No. 3 Lake Park',
              },
              {
                key: 1312,
                name: 'Jimmy Green sr.',
                age: 18,
                address: 'London No. 4 Lake Park',
              },
            ],
          },
        ],
      },
    ],
  },
  {
    key: 2,
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
]

// const rowSelection = {
//   onChange: (selectedRowKeys, selectedRows) => {
//     console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
//   },
//   onSelect: (record, selected, selectedRows) => {
//     console.log(record, selected, selectedRows)
//   },
//   onSelectAll: (selected, selectedRows, changeRows) => {
//     console.log(selected, selectedRows, changeRows)
//   },
// }

export default {
  data() {
    return {
      data,
      columns,
      //   rowSelection,
      ModalText: 'Content of the modal',
      visible: false,
      confirmLoading: false,
      formLayout: 'horizontal',
      form: this.$form.createForm(this, { name: 'coordinated' }),
    }
  },
  methods: {
    init() {
      queryParentGoods()
        .then((res) => {
          //   console.log(res)
          this.data = res.data
        })
        .catch((err) => {
          console.log(err)
        })
    },
    showModal() {
      this.visible = true
    },
    handleOk(e) {
      e.preventDefault()
      this.confirmLoading = true
      this.form.validateFields((err, values) => {
        if (!err) {
          values.typeParentId = values.typeParentId * 1
          console.log('Received values of form: ', values)
          addGoodsType({...values})
            .then((res) => {
              this.visible = false
              this.confirmLoading = false
              this.init()
            })
            .catch((err) => {
              this.visible = false
              this.confirmLoading = false
            })
        }
      })
    },
    handleCancel(e) {
      console.log('Clicked cancel button')
      this.visible = false
    },
  },
  created() {
    this.init()
  },
}
</script>
